<template>
    <div class="wrap info">
        <div class="wrap-header">
            <el-form :model="infoForm" :rules="rules" ref="infoForm" label-width="240px" size="mini">
                <el-form-item label="昵称" prop="name">
                    <el-input v-model="infoForm.name"></el-input>
                </el-form-item>
                <el-form-item label="头像">
                    <el-upload
                        class="avatar-uploader"
                        :action="uploadUrl"
                        name="multipartFile"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess">
                        <img v-if="infoForm.avatar" :src="baseURL+infoForm.avatar" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item prop="address" label="收货地址">
                    <el-input v-model="infoForm.address"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="mobile">
                    <div class="mobile">
                        <el-input v-model="infoForm.mobile" class="mobile-input"></el-input>
                        <el-button @click="getValidCode" v-if="isTimeOut" class="ml8">获取验证码</el-button>
                        <el-button disabled v-if="!isTimeOut">{{countdown}}s</el-button>
                    </div>
                </el-form-item>
                <el-form-item label="验证码" prop="validCode">
                    <el-input v-model="infoForm.validCode"></el-input>
                </el-form-item>
                <el-form-item label="支付密码" prop="payPsw">
                    <el-input v-model="infoForm.payPsw" type="password"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="psw1">
                    <el-input v-model="infoForm.psw1" type="password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="psw2">
                    <el-input v-model="infoForm.psw2" type="password"></el-input>
                </el-form-item>

            </el-form>
            <div class="center">
                <el-button size="mini" @click="save">更新</el-button>
            </div>
        </div>
    </div>
</template>

<script type="text/javascript">
    import _axios,{baseURL} from "../../utils/axios";

    export default {
        name: "list",
        data() {
            const validatePsw2 = (rule, value, callback) => {
                if (!value || value !== this.infoForm.psw1) {
                    return callback(new Error('密码不一致'));
                }
                else {
                    return callback();
                }

            };
            return {
                baseURL: baseURL,
                uploadUrl: baseURL + '/api/common/uploadFile?type=infoImg',
                infoForm: {
                    name: '',
                    avatar: '',
                    address: '',
                    mobile: '',
                    validCode: '',
                    payPsw: '',
                    psw1: '',
                    psw2: ''
                },
                rules: {
                    name: [
                        {required: true, message: '请输入用户名', trigger: 'blur', whitespace: true},
                    ],
                    mobile: [
                        {required: true, message: '请输入手机号', trigger: 'blur', whitespace: true},
                    ],
                    address: [
                        {required: true, message: '请选择地址', trigger: 'blur', whitespace: true},
                    ],
                    validCode: [
                        {required: true, message: '请输入验证码', trigger: 'blur', whitespace: true},
                    ],
                    payPsw: [
                        {required: true, message: '请输入支付密码', trigger: 'blur', whitespace: true},
                    ],
                    psw1: [
                        {required: true, message: '请输入密码', trigger: 'blur', whitespace: true},
                    ],
                    psw2: [
                        {validator: validatePsw2, trigger: 'blur'},
                    ],
                },
                isTimeOut: true,
                countdown: 60,
                validCode: '',
                confirmCorrect: false,
                trueCode: ''
            }
        },
        methods: {
            getDetail() {
                _axios.get('/api/api/user/getById?userId='+sessionStorage.getItem('id')).then(res => {
                    this.infoForm.name = res.data.name;
                    this.infoForm.avatar = res.data.avatar;
                    this.infoForm.address = res.data.address;
                    this.infoForm.mobile = res.data.mobile;
                })
            },
            getValidCode() {
                this.isTimeOut = false;

                this.$axios.get('/api/api/common/mobileCode?mobile=' + this.infoForm.mobile).then(res => {
                    this.trueCode = res.msg;
                    let timer = setInterval(() => {
                        this.countdown--;
                        if (this.countdown <= 0) {
                            this.isTimeOut = true;
                            clearInterval(timer);
                        }
                    }, 1000);
                })
            },
            handleAvatarSuccess(res, file) {
                this.infoForm.avatar = res.msg;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            save() {
                this.$refs.infoForm.validate(valid => {
                    if (valid) {
                        this.$api.user.update({
                            address: this.infoForm.address,
                            avatar: this.infoForm.avatar,
                            mobile: this.infoForm.mobile,
                            mobileCode: this.infoForm.validCode,
                            name: this.infoForm.name,
                            password: this.infoForm.psw1,
                            payCode: this.infoForm.payPsw,
                            id: sessionStorage.getItem('id')
                        }).then(res => {
                            this.$message.success('更新成功');
                            sessionStorage.setItem('avatar', this.infoForm.avatar);
                            this.$eventBus.emit('updateAvatar', this.infoForm.avatar);
                        })
                    }
                })
            }
        },
        mounted() {
            this.getDetail();
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss">
    .info {
        .center {
            text-align: center;
        }
        .el-form {
            width: calc(100% - 200px);
            .mobile {
                display: flex;
                justify-content: space-between;
                &-input {
                    width: 75%;
                }
            }
        }
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: $text-color-primary;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    }
</style>
